<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<h2>${account.firstName}'s favorite books list</h2>

<c:url value="/profile/favorites/remove" var="favoritesRemoveUrl"/>

<script type="text/javascript" >
function removeBookFromFavorites(bookId) {

	$.post(
            "${favoritesRemoveUrl}",
            {
                bookId : bookId
            }
	).success(function(obj) {
    		var tr = $("#r"+bookId);
            tr.css("background-color","#004400");

            tr.fadeOut(400, function(){
                tr.remove();
            });
            
    		$('#info').html("Book has been successfully removed");
    }).error(function(obj) {
        alert('fail while removing book');
    });
        
}

</script>

<table border="1"  class="table table-striped table-bordered">
    <tr>
        <th>Name</th>
        <th>Authors</th>
        <th>Genres</th>
        <th></th>
    </tr>
    <c:forEach items="${books}" var="book">
    <c:url value="/book/${book.id}" var="bookUrl"/>
        <tr id="r${book.id}">
            <td><a href="${bookUrl}">${book.name}</a></td>
            <td>${book.authorList}</td>
            <td>${book.genreList}</td>
            <td><div id="${book.id}"><a href="#" onclick="removeBookFromFavorites(${book.id})">Remove from Favorites</a></div></td>
        </tr>
    </c:forEach>
</table>

<div id="info"></div>